<template>
  <div class="ryxq">
    <div class="ryxq-a-a">
      <div class="ryxq-a">返回</div>
      <div class="ryxq-aa">卢继鸿</div>
      <div class="ryxq-aaa"></div>
    </div>
    <div class="ryxq-b">
      <div class="ryxq-b-aa">卢</div>
      <div class="ryxq-b-aaa">
        <div class="ryxq-b-aaaa">卢继鸿</div>
        <div class="ryxq-b-aaaaa">
          南华期货股份有限公司苏州营业部董事长兼总经理。
        </div>
      </div>
    </div>
    <div class="ryxq-c">
      <div class="ryxq-ca">
        <div class="ryxq-c-a">关</div>
        <div class="ryxq-c-a">联</div>

        <div class="ryxq-c-a">企</div>
        <div class="ryxq-c-a">业</div>
        <div class="ryxq-c-a">3</div>
      </div>
      <div class="ryxq-c-aa">
        <div class="ryxq-c-aaa" v-for="(item, index) in list1" :key="index">
          <div class="ryxq-caa">{{ item.title }}</div>
          <div class="ryxq-c-aaaa">
            <span class="ryxq-c-aaaaa">{{ item.content }}</span
            >{{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="ryxq-c">
      <div class="ryxq-ca">
        <div class="ryxq-c-a">合</div>
        <div class="ryxq-c-a">作</div>

        <div class="ryxq-c-a">伙</div>
        <div class="ryxq-c-a">伴</div>
        <div class="ryxq-c-a">3</div>
      </div>
      <div class="ryxq-c-aa">
        <div class="ryxq-c-aaa" v-for="(item, index) in list2" :key="index">
          <div class="ryxq-cc">
            <div
              class="ryxq-ccc"
              :style="{ 'background-color': getColor(index) }"
            >
              {{ item.title1 }}
            </div>
            <div class="ryxq-cccc">{{ item.name1 }}</div>
          </div>
          <div class="ryxq-ccccc">{{ item.content1 }}</div>
        </div>
      </div>
    </div>
    <div class="ryxq-c">
      <div class="ryxq-ca ryxq-dd">
        <div class="ryxq-c-a">关</div>
        <div class="ryxq-c-a">联</div>

        <div class="ryxq-c-a">图</div>
        <div class="ryxq-c-a">谱</div>
      </div>
      <div class="ryxq-c-aa">
        <div class="ryxq-c-aaa ryxq-add">
          <div class="ryxq-addd"></div>
          <div class="ryxq-ad">任职图谱</div>
        </div>
      </div>
    </div>
    <div class="ryxq-e">
      <div class="ryxq-e-aa">关联企业</div>
      <div class="ryxq-e-a" v-for="(item,index) in list4" :key="index">
        <div class="ryxq-e-aaa">
          <div class="ryxq-ee" :style="{'background-color':getColor(index)}">{{item.title1}}</div>
          <div class="ryxq-eea">
            <div class="ryxq-eeaa">{{item.name1}}</div>
            <div class="ryxq-g">
              <div class="ryxq-gg">存续</div>
              <div class="ryxq-ggg">注册资本</div>
              <div class="ryxq-gggg">{{item.content1}}</div>
            </div>
          </div>
        </div>
        <div class="ryxq-f">任职<span class="ryxq-ff">{{item.content2}}</span></div>
      <div class="ryxq-f">任职<span class="ryxq-ff">{{item.content3}}</span></div>
      </div>
      
      
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      list1: [
        {
          title: "南华期货股份有限公司",
          name: "董事长",
          content: "任职",
        },
        {
          title: "南华期货股份有限公司",
          name: "董事长",
          content: "任职",
        },
        {
          title: "南华期货股份有限公司",
          name: "董事长",
          content: "任职",
        },
        // {
        //   title:'南华期货股份有限公司',
        //   name:'董事长',
        //   content:'任职',
        // },
      ],
      list2: [
        {
          title1: "钱",
          name1: "钱淑英",
          content1: "东吴人寿保险股 份有 限公司",
        },
        {
          title1: "钱",
          name1: "钱淑英",
          content1: "东吴人寿保险股 份有 限公司",
        },
        {
          title1: "钱",
          name1: "钱淑英",
          content1: "东吴人寿保险股 份有 限公司",
        },
      ],
      list4: [
        {
          title1: "南华期货",
          name1: "南华期货股份有限公司苏州营业部",
          content1: "1000万元",
          content2: '任职 副董事长、法人、总经理（历史）',
          content3: '法人',

        },
        {
          title1: "南华期货",
          name1: "南华期货股份有限公司苏州营业部",
          content1: "1000万元",
          content2: '任职 副董事长、法人、总经理（历史）',
          content3: '法人',

        },
      
      ],
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    getColor(index) {
      const color = ["#CCA5D5", "#CCA685", "#74A8E7", "#7DB7B7"];
      return color[index % color.length];
    },
  },
};
</script>
<style scoped lang="scss">
.ryxq {
  .ryxq-a-a {
    display: flex;
    justify-content: space-between;
    height: 92px;
    .ryxq-a {
      margin: 61px 0 0 17px;
      width: 35px;
      font-size: 17px;
    }
    .ryxq-aa {
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 17px;
      color: #000000;
      margin-top: 61px;
    }
    .ryxq-aaa {
      margin: 61px 17px 0 0;
      width: 35px;
    }
  }
  .ryxq-b {
    border-bottom: 7px solid #f6f6f6;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    .ryxq-b-aa {
      width: 37px;
      height: 37px;
      background: #d99d9a;
      border-radius: 4px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 19px;
      color: #ffffff;
      line-height: 37px;
      text-align: center;
      margin-left: 12px;
    }
    .ryxq-b-aaa {
      margin-left: 6px;
      .ryxq-b-aaaa {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
      }
      .ryxq-b-aaaaa {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 15px;
        color: #989898;
      }
    }
  }
  .ryxq-c {
    border-bottom: 7px solid #f6f6f6;
    height: 101px;
    display: flex;
    align-items: center;

    .ryxq-ca {
      margin-left: 12px;
      width: 19px;
      height: 78px;
      background: #e5f0fb;
      border-radius: 2px;

      .ryxq-c-a {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 12px;
        color: #2c2c2c;
        text-align: center;
      }
    }
    .ryxq-dd {
      padding-top: 8px;
    }
    .ryxq-c-aa {
      display: flex;
      align-items: center;
      justify-content: center;
      // overflow-x: auto;

      .ryxq-c-aaa {
        width: 106px;
        height: 78px;
        background: #f8f8f8;
        border-radius: 5px;
        margin-left: 6px;
        flex-shrink: 0;
        .ryxq-cc {
          display: flex;
          align-items: center;
          padding: 8px 0 0 8px;
          .ryxq-ccc {
            font-family: Source Han Sans SC;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            width: 25px;
            height: 25px;
            background: #74a8e7;
            border-radius: 4px;
            line-height: 25px;
            text-align: center;
          }
          .ryxq-cccc {
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            margin-left: 5px;
          }
        }
        .ryxq-ccccc {
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 12px;
          color: #717171;
          padding: 10px 17px 0 8px;
        }
        .ryxq-caa {
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 14px;
          color: #000000;
          padding: 10px 17px 0 8px;
        }
        .ryxq-c-aaaa {
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 12px;
          color: #717171;
          padding: 13px 0 0 8px;
          // .ryxq-c-aaaaa{
          //   font-family: Alibaba PuHuiTi;
          // font-weight: 500;
          // font-size: 12px;
          // color: #717171;

          // }
        }
      }
      .ryxq-add {
        display: flex;
        align-items: center;
        justify-content: center;
        .ryxq-addd {
        }
        .ryxq-ad {
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 12px;
          color: #000000;
        }
      }
    }
  }
  .ryxq-e {
    margin: 15px 12px 0 12px;
    .ryxq-e-aa {
      font-family: Alibaba PuHuiTi;
      font-weight: 600;
      font-size: 15px;
      color: #000000;
    }
    .ryxq-e-a {
    border-bottom: 1px solid #f6f6f6;
    margin:16px 0 0 6px;

      .ryxq-e-aaa {
        display: flex;
        .ryxq-ee {
          width: 37px;
          height: 37px;
          background: #a0c479;
          border-radius: 4px;
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          font-size: 13px;
          color: #ffffff;
          line-height: 18px;
          text-align: center;
        }
        .ryxq-eea {
          .ryxq-eeaa {
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 18px;
            color: #000000;
            line-height: 20px;
          }
          .ryxq-g {
            display: flex;
            align-items: center;
            .ryxq-gg {
              width: 49px;
              height: 21px;
              background: #e3f2ed;
              border-radius: 2px;
              font-family: Alibaba PuHuiTi;
              font-weight: 400;
              font-size: 12px;
              color: #3f9f71;
              line-height: 21px;
              text-align: center;
            }
            .ryxq-ggg {
              font-family: Alibaba PuHuiTi;
              font-weight: 400;
              font-size: 15px;
              color: #989898;
              margin-left: 8px;
            }
            .ryxq-gggg {
              font-family: Alibaba PuHuiTi;
              font-weight: 400;
              font-size: 15px;
              color: #000000;
              margin-left: 4px;
            }
          }
        }
      }
    }
    .ryxq-f{
      font-family: Alibaba PuHuiTi;
              font-weight: 400;
              font-size: 15px;
              color: #989898;
              margin-top: 11px;
              .ryxq-ff{
                font-family: Alibaba PuHuiTi;
              font-weight: 400;
              font-size: 15px;
              color: #000000;
              margin-left: 4px;
              margin-bottom: 13px;
              }
    }
  }
}
</style>
